$(function(){
  // 1.tab栏样式切换效果
  var index=0,
  sexValue='';
  $('.tabs').on('mouseenter','.tabs-item',function(e){
    $(this).addClass('active').siblings().removeClass('active')
    //移动时保留点击的类
    $('.tabs').find('.tabs-item').eq(index).addClass('active')
  })
  $('.tabs').on('click','.tabs-item',function(e){
    $(this).addClass('active').siblings().removeClass('active');
    index=$(this).index();
    //展示点击的内容
    $('.right-content').children().eq(index).css('display','block').siblings().css('display','none')
  })
  $('.tabs').on('mouseleave',function(e){
      //离开时保留点击的类
    $(this).find('.tabs-item').eq(index).addClass('active').siblings().removeClass('active')
  })
  // 2.实现sex点击功能
  $('.circleBox').on('click',function(){
    $(this).addClass('activeCircle').parent().siblings().children('.circleBox').removeClass('activeCircle')
    sexValue=$(this).siblings('.word').html();
  })
})